<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="800px"
      @closed="close"
      @open="openfn"
    >
      <el-row>
        <el-col v-if="!setgtelsfalg" :span="12">
          <div v-if="dialogVisible" style="display: flex; height: 500px">
            <charge-set-car @setChargeCar="setChargeCarfn" />
          </div>
        </el-col>
        <el-col :span="setgtelsfalg ? 24 : 12">
          <div style="height: 500px; padding-left: 20px">
            <el-scrollbar>
              <div
                v-for="(item, index) in USearch"
                :key="index"
                class="useritem"
                :class="{ active: item.uUser == formdata.uUser }"
                @click="setuUser(item)"
              >
                {{ item.uUser }}_{{ item.uxm }}_{{ item.utel }}
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>

      <template #footer>
        <el-button :loading="loading" type="primary" @click="updatafn">
          确定
        </el-button>
        <slot name="btnslot"></slot>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import chargeSetCar from '@/components/ChargeSetCar/ChargeSetCarnew'

  export default {
    name: 'afterlistxjpd',
    components: {
      chargeSetCar,
    },
    emits: ['edtdatafn'],
    data() {
      return {
        dialogVisible: false,
        title: '巡检派单',
        USearch: [],
        formdata: { uUser: '', gtels: [] },
        loading: false,
        setgtelsfalg: false,
      }
    },
    mounted() {
      this.getdata()
    },
    methods: {
      setuUser(item) {
        this.formdata.uUser = item.uUser
      },
      setChargeCarfn(ChargeCar) {
        let gtels = ChargeCar.map((e) => {
          return e.gtel
        })
        this.formdata.gtels = gtels
      },

      async getdata() {
        // sutype:
        let { data } = await this.$z.$axios.post('/USearchDetailed', {
          sutype: `utype in (22)`,
        })
        this.USearch = data
      },
      async updatafn() {
        if (this.formdata.uUser == '') {
          this.$message.error('请选择用户')
          return
        }
        if (this.formdata.gtels.length == 0) {
          this.$message.error('请选择设备')
          return
        }
        this.loading = true
        let reqs = []
        if (this.setgtelsfalg) {
          this.formdata.gtels.forEach((e) => {
            reqs.push(
              this.$z.$axios.post('/AfterListedt', {
                ...e,
                uUser: this.formdata.uUser,
              })
            )
          })
        } else {
          this.formdata.gtels.forEach((e) => {
            reqs.push(
              this.$z.$axios.post('/AfterListXJpd', {
                gtel: e,
                uUser: this.formdata.uUser,
              })
            )
          })
        }

        await Promise.all(reqs)
        this.$message.success('操作完成')
        this.loading = false
        this.dialogVisible = false
        this.asynccallback()
      },
      close() {
        this.dialogVisible = false
      },
      openfn() {},
      show(gtels = [], asynccallback) {
        this.asynccallback = asynccallback
        this.setgtelsfalg = gtels.length == 0 ? false : true
        this.formdata.gtels = gtels
        this.dialogVisible = true
      },
    },
  }
</script>
<style lang="scss">
  .useritem {
    height: 40px;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    &.active {
      background: rgba(255, 255, 255, 0.2);
    }
  }
</style>
